<!-- 
 需求需要此页面废弃
 -->
<template>
	<view>
		<page-head :title="'获学员'" :headtype="1"></page-head>
		<view class="topblock">
			<view class="tagnav">
				<view class="tagnavmain marginAuto">
					<view class="naveach" @click="navfun(1)" :class="navac == 1 ? 'navactive':''">抢单中
						<view class="naveachx"></view>
					</view>
					<view class="naveach" @click="navfun(2)" :class="navac == 2 ? 'navactive':''">我的历史抢单
						<view class="naveachx"></view>
					</view>
				</view>
			</view>
			<view class="statistics marginAuto flex">
				<view class="statisticsq" style="left:-20rpx;"></view>
				<view class="statisticsq" style="right:-20rpx;"></view>
				<view class="statisticseach">
					<view class="statisticsnum">{{ qinfo.new }}</view>
					<view class="statisticstitle">新学员</view>
				</view>
				<view class="statisticseach">
					<view class="statisticsnum">{{ qinfo.money }}</view>
					<view class="statisticstitle">余额/ <text style="color:#0E71EB;">充值</text></view>
				</view>
				<view class="statisticseach">
					<view class="statisticsnum">{{ qinfo.lock }}</view>
					<view class="statisticstitle">当前锁额</view>
				</view>
			</view>
		</view>
		<view class="tralist">
			<view class="traitem marginAuto" v-for="(item,index) in datas" :key="index" v-if="navac == 1">
				<view class="traitemt flex">
					<view class="traitemtl flex">
						<image class="traitemtlhead" v-if="!item.user_avatar" :src="apifun.serveimg+'headav.png'" mode=""></image>
						<image class="traitemtlhead" v-if="item.user_avatar" :src="apifun.URLimg+item.user_avatar" mode=""></image>
						<view class="traitemtlmsg">
							<text>{{ item.user_name }}</text>
							<text style="margin-left: 20rpx;">{{ item.user_mobile }}</text>
						</view>
					</view>
					<!-- 当前时间  - pay_time <= 180秒 显示倒计时  {{ item.pay_time }}  @finish-->
					<view class="traitemttime mainColor flex" v-if="item.djpay_time">
						<uv-count-down style="margin-top:6rpx;" 
						class="mainColor" 
						:time="item.djpay_time"
						format="ss" autoStart
						@finish="timeendfun(item)"></uv-count-down>
						<view>秒</view>
					</view>
				</view>
				<view class="traitemmsg flex">
					<view class="traitemmy"></view>
					<view class="traitemmtxt">{{ item.course_name }}</view>
				</view>
				<view class="traitemmoney">
					<text style="font-size:24rpx;">￥</text>
					<text>{{ item.amount }}</text>
				</view>
				<view class="traitembtn flex">
					<view class="traitembl">
						<view class="traitemblb mainColor">{{ item.pay_type == 1 ? '微信':'先用后付' }}：体验课程</view>
					</view>
					<view class="traitembbtn mainBg baiColor" @click="takingfun(item,index)">接单</view>
				</view>
			</view>
			<view class="traitem marginAuto" v-for="(item,index) in historydata" :key="index" v-if="navac == 2">
				<view class="traitemt flex">
					<view class="traitemtl flex">
						<image class="traitemtlhead" v-if="!item.user_avatar" :src="apifun.serveimg+'headav.png'" mode=""></image>
						<image class="traitemtlhead" v-if="item.user_avatar" :src="apifun.URLimg+item.user_avatar" mode=""></image>
						<view class="traitemtlmsg">
							<text>{{ item.user_name }}</text>
							<text style="margin-left: 20rpx;">{{ item.user_mobile }}</text>
						</view>
					</view>
					<!-- <view class="traitemttime mainColor">{{ item.pay_time }}秒</view> -->
				</view>
				<view class="traitemmsg flex">
					<view class="traitemmy"></view>
					<view class="traitemmtxt">{{ item.course_name }}</view>
				</view>
				<view class="traitemmoney">
					<text style="font-size:24rpx;">￥</text>
					<text>{{ item.amount }}</text>
				</view>
				<view class="traitembtn flex">
					<view class="traitembl">
						<view class="traitemblb mainColor">{{ item.pay_type == 1 ? '微信':'先用后付' }}：体验课程</view>
					</view>
					<view class="traitembbtn mainColor">抢单成功</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<uv-popup ref="taking" bgColor="none" round="20">
			<view class="closetest">
				<image class="closetestbg" :src="apifun.serveimg+'closetestbg.png'" mode=""></image>
				<view class="closetesttitle" style="font-weight: 600;">确认抢次订单吗？</view>
				<view class="closetestbtn flex">
					<view class="closetestbtne mainColor" style="background: #ffffff;" @click="$refs.taking.close()">取消</view>
					<view class="closetestbtne mainBg baiColor" @click="entertakingfun">确定</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				page:1,
				navac:1,
				qinfo:{},
				datas:[],
				historydata:[],
				activeitem:{},
				activeindex:''
			};
		},
		onLoad() {
			this.getqInfo();
		},
		methods: {
			takingfun(item,index){
				this.activeitem = item;
				this.activeindex = index;
				this.$refs.taking.open()
			},
			entertakingfun(){ // 确定接单
				let sendData = {
					id:this.activeitem.id
				};
				this.apifun.unirequest('/coach/order/acceptOrder','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.$refs.taking.close();
						this.datas.splice(this.activeindex,1)
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			initData(){
				let that = this;
				let sendData = {
					page:this.page,
					limit:this.apifun.limit
				};
				this.apifun.unirequest('/coach/order/getRobOrderList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						let newdatas = [];
						datas.data.forEach((item,index)=>{
							item.djpay_time = item.pay_time*1000;
							newdatas.push(item)
						});
						this.datas = [...this.datas,...newdatas]
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			historydatafun(){
				let sendData = {
					page:this.page,
					limit:this.apifun.limit
				};
				this.apifun.unirequest('/coach/order/getHistoryOrderList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						this.historydata = [...this.historydata,...datas.data]
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			navfun(type){
				this.navac = type;
				if(type == 1){
					this.page = 1;
					this.datas = [];
					this.initData();
				}else{
					this.page = 1;
					this.historydata = [];
					this.historydatafun();
				}
			},
			getqInfo(){  // 抢单信息
				let that = this;
				let sendData = {};
				this.apifun.unirequest('/coach/order/getInfo','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.qinfo = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			timeendfun(item,index){  // 倒计时结束
				this.$set(item,'djpay_time',false)
			}
		},
		onShow() {
			this.page = 1;
			this.datas = [];
			this.initData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.datas = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
	};
</script>

<style scoped lang="scss">
	@import '../../public/alert.scss';
	.topblock{
		position:sticky;
		top: 0;
		z-index: 10;
		width: 100%;
		background:#fff;
	}
	.tagnav{
		width: 100%;
		padding:30rpx 0 40rpx;
		background:#fff;
		.tagnavmain{
			width:80%;
			display: flex;
			justify-content:space-around;
			.naveach {
				position: relative;
				color: #999999;
				font-size:30rpx;
				text-align: center;
				font-weight: 600;
				line-height: 50rpx;
				.naveachx {
					position: absolute;
					bottom: -22rpx;
					left: 50%;
					background: #fff;
					width: 50rpx;
					margin-left: -25rpx;
					height: 6rpx;
					border-radius: 100rpx;
					transition: background .5s;
				}
			}
			.navactive {
				color:#0E71EB;
				.naveachx {
					background: #0E71EB;
				}
			}
		}
	}
	// 统计
	.statistics{
		position: relative;
		width: 690rpx;
		padding: 30rpx 0;
		background:#E4EFFF;
		border-radius:10rpx;
		margin-top: 20rpx;
		overflow: hidden;
		justify-content: space-around;
		.statisticsq{
			position: absolute;
			top: 70rpx;
			width:40rpx;
			height: 40rpx;
			background: #ffffff;
			border-radius: 50%;
		}
		.statisticseach{
			width: 30%;
			text-align: center;
			.statisticsnum{
				color: #1177F4;
				font-size:40rpx;
				line-height: 60rpx;
			}
			.statisticstitle{
				font-size: 24rpx;
				color: #333333;
				line-height: 60rpx;
			}
		}
	}
	// 列表
	.tralist{
		.traitem{
			width: 650rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;
			.traitemt{
				line-height: 52rpx;
				justify-content: space-between;
				.traitemtl{
					.traitemtlhead{
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
					}
					.traitemtlmsg{
						margin-left:20rpx;
						color:#333333;
						font-size: 30rpx;
						line-height: 52rpx;
					}
				}
				.traitemttime{
					font-size: 30rpx;
					line-height: 52rpx;
				}
			}
			.traitemmsg{
				position: relative;
				padding: 20rpx 0;
				.traitemmy{
					position:absolute;
					top: 34rpx;
					width: 15rpx;
					height: 15rpx;
					border: 1px solid #0E71EB;
					border-radius: 50%;
				}
				.traitemmtxt{
					margin-left:30rpx;
					font-size: 30rpx;
					color: #333333;
					line-height: 40rpx;
				}
			}
			.traitemmoney{
				color:#FF3B3B;
				font-size:40rpx;
			}
			.traitembtn{
				padding-top: 20rpx;
				justify-content: space-between;
				.traitembl{
					.traitemblb{
						margin-top: 20rpx;
						display: inline-block;
						padding: 0 20rpx;
						height: 44rpx;
						line-height: 44rpx;
						border: 1px solid #0E71EB;
						border-radius: 6rpx;
						font-size:28rpx;
					}
				}
				.traitembbtn{
					width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align:center;
					border-radius:10rpx;
					border:1px solid #0E71EB;
				}
			}
		}
	}
</style>